<template>
	<el-tabs type="border-card" v-model="activeName" class="m-t-20" @tab-click="fnTabClick">   
	  	<el-tab-pane label="会议室" name="conference">
	  		<!--工具条-->
			<el-col :span="24" class="toolbar" style="padding-bottom: 0px;height: 56px;">
				<el-form :inline="true">
					<el-form-item>
						<el-button type="warning" @click="fnOpenConference('new',0)">新增会议室</el-button>
					</el-form-item>
				</el-form>
			</el-col>
			
			<!--会议室列表-->
			<el-table :data="conferences" border v-loading="conferencesLoading" class="conference-list">
				<el-table-column type="index" label="#" width="60">
				</el-table-column>
				<el-table-column prop="Code" label="会议室编号">
				</el-table-column>
				<el-table-column prop="Name" label="会议室名称">
				</el-table-column>
				<el-table-column prop="Location" label="会议室位置">
				</el-table-column>
				<el-table-column prop="OfficeName" label="审核办公室">
				</el-table-column>
				<el-table-column prop="Status" label="使用状态">
				</el-table-column>
				<el-table-column label="操作" width="110">
					<template scope="scope">
					    <el-tooltip class="item" effect="dark" content="编辑" placement="bottom">
					      	<el-button type="info" size="mini" icon="custom-edit"  @click="fnOpenConference('edit',scope.row.ID)"></el-button>
					    </el-tooltip>
					    <el-tooltip class="item" effect="dark" content="预约记录" placement="bottom">
					      	<el-button type="success" size="mini" icon="custom-record"  @click="emitJumpPage(scope.row.ID,'application-record')"></el-button>
					    </el-tooltip>
					</template>
				</el-table-column>
			</el-table>
			
			<!--新增/编辑会议室界面-->
			<el-dialog :title="addConferenceTitle" v-model="addConferenceVisible" :close-on-click-modal="false">
				<el-form :model="addConference" label-width="100px" :rules="addConferenceRules" ref="addConference">
					<el-form-item label="会议室编号">
						<el-col :span="8">
							<el-input v-model="addConference.Code" placeholder="会议室编号" :disabled="type == 'edit'"></el-input>
						</el-col>
						<el-col :span="4" class="label-txt">会议室名称</el-col>
						<el-col :span="8">
							<el-input v-model="addConference.Name" placeholder="会议室名称"></el-input>
						</el-col>
					</el-form-item>
					<el-form-item label="会议室位置">
						<el-col :span="21">
							<el-input v-model="addConference.Location" placeholder="会议室位置"></el-input>
						</el-col>
					</el-form-item>
					<el-form-item label="位置图示">
						<el-upload class="avatar-uploader" action="/api/doc/meetingroom" :show-file-list="false" :on-success="handleAvatarSuccess">
							<img v-if="imageUrl" :src="imageUrl" class="avatar">
							<i v-else class="el-icon-plus avatar-uploader-icon"></i>
						</el-upload>
					</el-form-item>
					<el-form-item label="审核办公室">
						<el-col :span="8">
							<el-select v-model="addConference.OfficeID" placeholder="请选择">
								<el-option v-for="item in auditOffices" :key="item.ID" :label="item.Name" :value="item.ID"></el-option>
							</el-select>
						</el-col>
						<el-col :span="4" class="label-txt">使用状态</el-col>
						<el-col :span="8">
							<el-select v-model="addConference.Status" placeholder="请选择">
								<el-option v-for="item in allStatus" :key="item.value" :label="item.label" :value="item.value"></el-option>
							</el-select>
						</el-col>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click.native="addConferenceVisible = false">取消</el-button>
					<el-button type="primary" @click.native="fnAddConference">提交</el-button>
				</div>
			</el-dialog>
	  	</el-tab-pane>
	  	
	  	<el-tab-pane label="审核办公室" name="auditOffice">
	  		<!--工具条-->
			<el-col :span="24" class="toolbar" style="padding-bottom: 0px;height: 56px;">
				<el-form :inline="true">
					<el-form-item>
						<el-button type="warning" @click="fnOpenAuditOffice">新增审核办公室</el-button>
					</el-form-item>
				</el-form>
			</el-col>
			
			<!--审核办公室列表-->
			<el-table :data="auditOffices" border v-loading="auditOfficesLoading" class="auditOffices-list">
				<el-table-column type="index" label="#" width="60">
				</el-table-column>
				<el-table-column prop="Name" label="办公室名称">
				</el-table-column>
				<el-table-column prop="Createdby" label="创建人">
				</el-table-column>
				<el-table-column prop="CreatedTime" label="创建时间" :formatter="fnDateFormat">
				</el-table-column>
				<el-table-column label="操作" width="110">
					<template scope="scope">
						<el-tooltip class="item" effect="dark" content="审核人列表" placement="bottom">
					      	<el-button type="info" size="mini" icon="custom-user"  @click="emitJumpPage(scope.row.ID,'auditor')"></el-button>
					    </el-tooltip>
					    <el-tooltip class="item" effect="dark" content="删除" placement="bottom">
					      	<el-button type="danger" size="mini" icon="custom-delete"  @click="fnDelAuditOffice(scope.row.ID)"></el-button>
					    </el-tooltip>
					</template>
				</el-table-column>
			</el-table>
			
			<!--新增审核办公室界面-->
			<el-dialog title="新增审核办公室界面" v-model="addAuditOfficesVisible" :close-on-click-modal="false">
				<el-form :inline="true" :model="addAuditOffices" label-width="80px" :rules="addAuditOfficesRules" ref="addAuditOffices">
					<el-form-item label="办公室名" prop="Name">
						<el-input v-model="addAuditOffices.Name" placeholder="名称" style="width:113%;"></el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click.native="addAuditOfficesVisible = false">取消</el-button>
					<el-button type="primary" @click.native="fnAddAuditOffices">提交</el-button>
				</div>
			</el-dialog>
	  	</el-tab-pane>
	</el-tabs>
</template>

<script>
	import Svc from '../../service/index.js'
	import moment from 'moment'
	export default {
		props:['active-name'],
		data() {
			return {
				//会议室所有的使用状态
				allStatus : [{
					label : '可用',
					value : 0
				},{
					label : '不可用',
					value : 1
				}],
				conferences : [], //所有会议室
				conferencesLoading : false,
				addConferenceTitle : '新增会议室',
				addConferenceVisible : false, //打开新增会议室
				imageUrl : '', //会议室图示（显示用）
				//新增会议室数据
				addConference : {
					ID : 0, //主键
					Code : '', // 会议室编号
					Name : '', // 会议室名称
					Location : '', // 会议室位置
					LocationImg : '', // 会议室位置图示
					OfficeID : '', // 会议室审核部门
					OfficeName : '', // 会议室审核办公室名称
					Status : ''// 状态 0-可用 1-不可用
				},
				//新增会议室验证
				addConferenceRules : {},
				officeId : 0,//当前选择会议室id
				type : '',//用于区分当前时新增会议室还是更新会议室
				auditOfficesLoading : false,
				auditOffices : [], //所有审核办公室
				addAuditOfficesVisible : false, //打开新增审核办公室
				//新增审核办公室
				addAuditOffices : {
					Name : '' //办公室名称
				},
				//新增审核办公室验证
				addAuditOfficesRules : {
					Name: [
		            	{ required: true, message: '请输入审核办公室名称', trigger: 'blur' }
		          	]
				} 
			}
		},
		methods: {
			//自定义事件->组件跳转
			emitJumpPage(officeID,nextComponent){
				this.$emit('jump-page',officeID,nextComponent)
			},
            //显示message提示框
            openMessage : function(msg,type){
    	        this.$message({
		          	showClose: true,
		          	message: msg,
		          	type: type
		        });
		    },
		    //时间格式化  
            fnDateFormat:function(row, column) {
            	var moment = require('moment');
                var date = row[column.property];  
	          	if (date == undefined) {  
	             	return "";  
	          	}  
	          	return moment(date).format("YYYY-MM-DD");  
            },
            //切换tab
            fnTabClick(tab){
            	if (tab.label == "会议室") {
            		this.fnGetConference()
            	} else if (tab.label == "审核办公室") {
            		this.fnGetAuditOffices()
            	}
            },
            //获取所有会议室
		    fnGetConference(){
		    	var that = this
	            Svc.fnGetData('/api/mroom/room/fetch',{},function(res){
	            	if (res.body.ErrCode == 0){
	            		that.conferences = res.body.Data
	            	} else {
	            		that.openMessage("会议室获取失败！",'error')
	            	}
	            },function(res){
	            	that.openMessage("网络错误，请重新！",'error')
	            })
		    },
		    //获取当前选中会议室的详情
		    fnGetConferenceDetail(){
		    	var that = this
	            Svc.fnGetData('/api/mroom/room/detail/'+that.officeId,{},function(res){
	            	if (res.body.ErrCode == 0){
	            		that.imageUrl = res.body.Data.LocationImg
	            		that.addConference = res.body.Data
	            		//不更新时穿空
	            		that.addConference.LocationImg = ""
	            	} else {
	            		that.openMessage("会议室详情获取失败！",'error')
	            	}
	            },function(res){
	            	that.openMessage("网络错误，请重新！",'error')
	            })
		    },
		    //打开新增会议室页面
		    fnOpenConference(type,officeId){
		    	var that = this
		    	that.officeId = officeId
		    	that.type = type
		    	that.addConferenceVisible = true
		    	if (type == "new") {
		    		that.addConferenceTitle = "新增会议室"
		    	} else if (type == "edit") {
		    		that.addConferenceTitle = "编辑会议室"
		    	}
		    	
		    	//获取所有审核办公室
		    	that.fnGetAuditOffices()
		    	
		    	if (officeId) {
		    		//获取当前选中会议室的详情
		    		that.fnGetConferenceDetail()
		    	}
		    },
		    //添加会议室图示成功
	        handleAvatarSuccess(res, file) {
	        	this.imageUrl = URL.createObjectURL(file.raw);
	        	this.addConference.LocationImg = res.Data.Key
	      	},
		    //新增或编辑会议室
		    fnAddConference(){
		    	var that = this
		    	var msg = "新增会议室成功！"
		    	//获取主键
		    	that.addConference.ID = that.officeId
		    	//获取审核办公室名称
		    	for(var i = 0; i < that.auditOffices.length; i++) {
					var item = that.auditOffices[i]
					if (item.ID == that.addConference.OfficeID) {
						that.addConference.OfficeName = item.Name
						break
					}
		    	}
		    	
		    	//编辑状态 -> 处理会议室使用状态
		    	if (that.type == 'edit') {
		    		msg = "编辑会议室成功！"
		    		if (that.addConference.Status == '可用') {
		    			that.addConference.Status = 0
		    		} else if (that.addConference.Status == '不可用') {
		    			that.addConference.Status = 1
		    		} 
		    	}
		    	
		    	Svc.fnPostData('/api/mroom/room/save',that.addConference,function(res){
	            	if (res.body.ErrCode == 0){
	            		that.addConferenceVisible = false
	            		that.openMessage(msg,'success')
	            		that.fnGetConference()
	            	} else {
	            		that.openMessage(res.body.ErrMsg,'error')
	            	}
	            },function(res){
	            	that.openMessage("网络错误，请重新！",'error')
	            })
		    },
		    //获取所有审核办公室
		    fnGetAuditOffices(){
		    	var that = this
	            Svc.fnGetData('/api/mroom/office/fetch',{},function(res){
	            	if (res.body.ErrCode == 0){
	            		that.auditOffices = res.body.Data
	            	} else {
	            		that.openMessage("审核办公室获取失败！",'error')
	            	}
	            },function(res){
	            	that.openMessage("网络错误，请重新！",'error')
	            })
		    },
		    //打开新增审核办公室页面
		    fnOpenAuditOffice(){
		    	var that = this
		    	that.addAuditOfficesVisible = true
		    },
		    //新增审核办公室
		    fnAddAuditOffices(){
		    	var that = this
		        that.$refs.addAuditOffices.validate((valid) => {
		          if (valid) {
			            Svc.fnPostData('/api/mroom/office/add',that.addAuditOffices,function(res){
			            	if (res.body.ErrCode == 0){
			            		that.addAuditOfficesVisible = false
			            		that.openMessage("审核办公室新增成功！",'success')
			            		that.fnGetAuditOffices()
			            	} else {
			            		that.openMessage(res.body.ErrMsg,'error')
			            	}
			            },function(res){
			            	that.openMessage("网络错误，请重新！",'error')
			            })
		          	} else {
			            return false;
			        }
		        })
		    },
		    //删除审核办公室
		    fnDelAuditOffice(id){
		    	var that = this
		    	that.$confirm('您确认要删除该审核办公室吗？', '提示', {
					type: 'warning'
				}).then(function(){
					Svc.fnPostData('/api/mroom/office/remove',{OfficeID:id},function(res){
		            	if (res.body.ErrCode == 0){
		            		that.openMessage("审核办公室删除成功！",'success')
		            		that.fnGetAuditOffices()
		            	} else {
		            		that.openMessage("审核办公室删除失败！",'error')
		            	}
		            },function(res){
		            	that.openMessage("网络错误，请重新！",'error')
		            })
				})
		    }
		},
		mounted() {
			if (this.activeName == 'conference') {
				//获取所有会议室
				this.fnGetConference()
			} else if (this.activeName == 'auditOffice') {
				//获取所有审核办公室
				this.fnGetAuditOffices()
			}
			
		}
	}
</script>

<style scoped>
	.m-t-20{
		margin-top: 20px;
	}
	
	.conference-list{
		width: 100%;
		margin-top: 20px;
	}
	
	.auditOffices-list{
		width: 100%;
		margin-top: 20px;
	}

	.toolbar {
	    background: #f2f2f2;
	    padding: 10px;
	    margin-bottom: 15px;
	}
	
	.label-txt {
		text-align: right;
		margin-right: 22px;
	}
	
	.avatar-uploader {
	    width: 463px;
    	height: 180px;
	    border: 1px dashed #d9d9d9;
	    border-radius: 6px;
	    cursor: pointer;
	    position: relative;
	    overflow: hidden;
	}
	.avatar-uploader:hover {
	    border-color: #409EFF;
	}
	.avatar-uploader-icon {
	    font-size: 28px;
	    color: #8c939d;
	    width: 463px;
	    height: 180px;
	    line-height: 180px;
	    text-align: center;
	}
	.avatar {
	    width: 463px;
	    height: 180px;
	    display: block;
	}
</style>